/* 另外  需要安装插件 
    "@babel/core",  babel-core 7.0 之后，包名升级为 @babel/core。
     babel-core 的作用是把 js 代码分析成 ast ，方便各个插件分析语法进行相应的处理。js文件处理需要此依赖

    "@babel/preset-env"  转为ES5插件
    "http-proxy-middleware"    connect.server 中配置中间键所需的插件
*/
var  gulp = require('gulp');

// gulp-sass 将 sass 转为 css 
var  sass  =  require ( 'gulp-sass' ) ( require ( 'sass' ) ) // gulp-sass 依赖于sass编译器
// gulp-watch 监听指定的文件,如果发生变化就自动进行执行相应的操作
var  watch = require('gulp-watch');
//gulp-uglify  压缩js文件
var  uglify = require('gulp-uglify');
//gulp-concat 多个js文件合并为一个
var concat = require('gulp-concat');
//gulp-babel 这是Babel的Gulp插件。
var babel = require('gulp-babel');
//del  用于删除文件或文件夹
var del = require('del');
//gulp-clean-css 压缩css文件
var  cleanCss = require('gulp-clean-css');
//gulp-htmlmin  压缩html文件
var htmlmin = require('gulp-htmlmin');
//gulp-connect  可以开启本地服务器 启动项目
var connect = require('gulp-connect');
//文件重命名
var rename = require("gulp-rename")
//
var  fileinclude=require("gulp-file-include")

//写各种操作任务

// 1.先删除dist文件夹 （不然每次启动gulp 都会创建一个dist目录）
gulp.task('delDist',()=>del('./dist'))

//2. sass文件的解析任务
gulp.task('sass',function(){
   return gulp.src('./src/sass/*.{scss,sass}')
   .pipe(sass())//转css
   .pipe(cleanCss({ //压缩css
    advanced: false,//类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
    compatibility: 'ie7',//保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
    keepBreaks: true,//类型：Boolean 默认：false [是否保留换行]
    keepSpecialComments: '*'
    //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
   }))
   .pipe(rename(function(filename){  
    filename.basename += ".min"
    }))    //压缩文件重命名
   .pipe(gulp.dest('./dist/css'))
   .pipe(connect.reload()) //浏览器自动刷新
})


//3. html文件压缩任务
gulp.task('html',()=>{
  // src 目录下的所有文件夹里面所有的 以 .html 结尾的文件
  return gulp.src(['./src/**/*.html','!./src/html/include/*.html'])
    .pipe(fileinclude()) //gulp-file-include  打包
    .pipe(htmlmin({
     //压缩配置选项
     removeComments: true, // 清除HTML注释
     collapseWhitespace: true, // 压缩HTML
     collapseBooleanAttributes: true, // 省略布尔属性的值 <input checked="true"/> ==> <input checked />
     removeEmptyAttributes: true, // 删除所有空格作属性值 <input id="" /> ==> <input />
     removeScriptTypeAttributes: false, // 删除<script>的type="text/javascript"
     removeStyleLinkTypeAttributes: false, // 删除<style>和<link>的type="text/css"
     minifyJS: true, // 压缩页面JS
     minifyCSS: true // 压缩页面CSS 
  }))
  .pipe(gulp.dest('./dist')) //输出到dist对应文件夹下
  .pipe(connect.reload());
})

gulp.task('include',()=>{
  // src 目录下的所有文件夹里面所有的 以 .html 结尾的文件
  return gulp.src('./src/html/include/*.html')
    .pipe(htmlmin({
     //压缩配置选项
     removeComments: true, // 清除HTML注释
     collapseWhitespace: true, // 压缩HTML
     collapseBooleanAttributes: true, // 省略布尔属性的值 <input checked="true"/> ==> <input checked />
     removeEmptyAttributes: true, // 删除所有空格作属性值 <input id="" /> ==> <input />
     removeScriptTypeAttributes: false, // 删除<script>的type="text/javascript"
     removeStyleLinkTypeAttributes: false, // 删除<style>和<link>的type="text/css"
     minifyJS: true, // 压缩页面JS
     minifyCSS: true // 压缩页面CSS 
  })).pipe(gulp.dest('./dist/html/include')) //输出到dist对应文件夹下
  .pipe(connect.reload())
})




//4.js文件任务
gulp.task('js',()=>{
  return  gulp.src('./src/js/*.js')
  .pipe(uglify()) //压缩
  .pipe(gulp.dest('./dist/js')) //输出
  .pipe(connect.reload())
})
// .pipe(babel({  //先转换
//   presets: ['@babel/env']        // ES6 转为 ES5  @babel/env 好像是版本号
// })
// )

//images 文件任务
gulp.task('img', ()=>gulp.src('./src/images/*.*').pipe(gulp.dest('./dist/images')))

//lib 插件集合  下载的插件已经压缩过了
gulp.task('lib', ()=>gulp.src('./src/lib/**/*.*').pipe(gulp.dest('./dist/lib')))

//icon 图标
gulp.task('icon', ()=>gulp.src('./src/*.ico').pipe(gulp.dest('./dist')))
 
//监听      只监听了sass、js、html 文件夹，其他文件改动需要重新启动任务
gulp.task('watch', function () {
    watch('./src/sass/*.{scss,sass}', gulp.parallel('sass'))
    watch('./src/js/*.js', gulp.parallel('js'))
    watch('./src/**/*.html', gulp.parallel('html'))  
})



// 配置一个服务器
gulp.task('server',()=>{
    connect.server({
    port: 4023, //端口，默认8080
    root: './dist', //根目录名，默认是gulpfile.js所在文件夹。
    //host——主机名，默认localhost，可忽略， 可设置自定义域名。
    livereload: true, //是否自动刷新
    // middleware() {  //配置中间件  需要安装http-proxy-middleware插件，生产模式
    //     // return [
    //     //     createProxyMiddleware('/duitang', //匹配所有以/duitang开始的路径。
    //     //       {
    //     //         target: 'https://www.duitang.com/napi/blog/list/by_filter_id/', //目的地址
    //     //         changeOrigin: true,//将主机头的源更改为目的地址
    //     //         pathRewrite: {
    //     //             '^/duitang': ''  //重写目标的url路径。
    //     //         }
    //     //       })
    //     // ]  //相当于在本地的4023端口的/duitang目录下, 开启了一个转发的服务中间件, 所有的跨越访问, 都经由该服务中间件进行转发. 在访问服务时, 需要在原始URL上添加localhost:4023/duitang/前缀.
    //    }
    })
})

//多个任务执行
gulp.task('default',gulp.series(['delDist',gulp.parallel(['html','include', 'sass', 'js', 'img', 'lib','icon', 'server', 'watch'])]))


